<template>
  <el-scrollbar height="630px">
<div class="post">
  <div>
    <el-row style="background: white;">
      <el-col :span="24">
        <div class="tbUpDiv">
          <div style="display: flex;">
            <img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg">
            <span class="tbUpPost">岗位需求库</span>
          </div>
          <div style="width: 160px;">
            <el-button type="primary" class="tbUpButt" @click="d.formJobPost = true">用工需求申请</el-button></div>
          </div>
      </el-col>
    </el-row>
    <el-row style="background: white;height: 82px">
      <el-col><div  style="display: flex;margin-left: 60px;margin-top: 10px">
        <div><span>岗位职称：</span><br>
          <el-input v-model="souForm.jobdemandName" style="width: 180px"  @keyup.enter="JobMohu()" /></div>
        <div style="margin-left: 40px"><span>发布部门：</span><br>
          <el-select style="width: 180px" v-model="souForm.deptId">
            <el-option
                v-for="item in d.typeDate"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
                @click="JobMohu()"
            />
          </el-select>
        </div>
        <div style="margin-left: 40px"><span>岗位状态：</span><br>
          <el-select style="width: 180px" v-model="souForm.jobdemandState">
            <el-option label="已发布" value="1" @click="JobMohu()"/>
            <el-option label="未发布" value="0" @click="JobMohu()"/>
            <el-option label="已关闭" value="2" @click="JobMohu()"/>
          </el-select>
        </div>
        <div style="margin-left: 50px;margin-top: 20px">
          <el-button @click="chongzhi()">重置</el-button>
        </div>
      </div></el-col>
    </el-row>
    <br>
    <el-row style="display: flex;justify-content: space-around">
      <el-col :span="10">
          <el-card shadow="hover">
            <div>岗位数量</div>
            <div><span>{{d.brs}}</span></div>
          </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="hover">
          <div>岗位需求人数</div>
          <div><span>{{d.srs}}</span></div>
        </el-card>
      </el-col>
    </el-row>

    <br>

    <el-row>
      <el-col>
        <el-table :data="d.tableData" @row-click="dianjixq" style="width: 100%">
          <el-table-column align='center' prop="jobdemandName" label="岗位职称" width="180" />
          <el-table-column  align='center' prop="dept.deptName" label="发布部门" width="180">
          </el-table-column>
          <el-table-column align='center' prop="jobdemandNumber" label="需求人数" width="180" />
          <el-table-column align='center' prop="jobdemandRousan" label="岗位需求" width="180" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column align='center' prop="jobdemandDate" label="发布时间" width="180" />
          <el-table-column align='center' prop="jobdemandState" label="岗位状态" width="180" >
            <template #default="s">
              <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobdemandState==0">未发布</div>
              <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobdemandState==2">已关闭</div>
              <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobdemandState==1">已发布</div>
            </template>
          </el-table-column>
          <el-table-column align='center' label="操作" >
            <template #default ="s" >
              <el-button v-if="s.row.jobdemandState==0" @click.stop="updateSteta(s.row.jobdemandState,s.row.jobdemandId)">岗位发布</el-button>
              <el-button v-if="s.row.jobdemandState==1"  @click.stop="updateSteta(s.row.jobdemandState,s.row.jobdemandId)">取消发布</el-button>
              <el-button v-if="s.row.jobdemandState==2" @click.stop="updateSteta(s.row.jobdemandState,s.row.jobdemandId)">重新发布</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-col>
        <el-pagination
            v-model:currentPage="d.pageNo"
            v-model:page-size="d.pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="d.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </el-col>
    </el-row>
  </div>
  <el-dialog v-model="formJobPost" title="用人需求申请单" style="text-align: center">
    <el-form :rules="bookRule" :model="form" ref="postForm" label-width="120px">
      <el-form-item prop="deptId" label="发布部门">
        <el-select v-model="form.deptId" placeholder="请选择">
          <el-option
              v-for="item in d.typeDate"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
              @click="huoquJb(form.deptId)"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="jobdemandName" label="岗位职称">
        <el-select v-model="form.jobdemandName" placeholder="请选择">
          <el-option
              v-for="item in d.jobDate"
              :key="item.jobrecordId"
              :label="item.jobdemandName"
              :value="item.jobdemandName"
              @click="huoquNumber(form.jobdemandName)"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="jobdemandNumber" label="需求人数">
        <el-input v-model="form.jobdemandNumber" style="width: 220px"/>
        <div><span v-if="d.cNumber>0">参考人数：</span><span v-if="d.cNumber>0">{{d.cNumber}}</span></div>
      </el-form-item>
      <el-form-item prop="jobdemandRousan" label="岗位需求">
        <el-input  v-model="form.jobdemandRousan" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(postForm)">确定</el-button>
        <el-button @click="resetForm(postForm)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="formJobPost2" title="岗位操作记录" style="text-align: center">
    <el-table :data="d.tableData2" style="width: 100%">
      <el-table-column align='center'  prop="jobdemand.jobdemandName" label="岗位名称" width="180" />
      <el-table-column align='center'  prop="jobdemandState" label="岗位原状态" width="180">
        <template #default="s">
          <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobdemandState==0">未发布</div>
          <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobdemandState==2">已关闭</div>
          <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobdemandState==1">已发布</div>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="jobdemandNstate" label="岗位现状态">
        <template #default="ss">
          <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="ss.row.jobdemandNstate==0">未发布</div>
          <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="ss.row.jobdemandNstate==2">已关闭</div>
          <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="ss.row.jobdemandNstate==1">已发布</div>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="jobrecordingDate" label="操作时间" />
    </el-table>
  </el-dialog>
</div>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import {onBeforeMount,toRefs,reactive,ref } from 'vue'
import {ElMessage, FormInstance, FormRules} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {useRouter} from "vue-router";
// do not use same name with ref
import axios from "axios";
import moment from "moment";
//定义事件
let str = moment(new Date()).format("YYYY-MM-DD hh:mm:ss")
let str2 = moment(new Date()).format("YYYY-MM-DD")
//搜索表单
const souForm=reactive({
  jobdemandName:'',
  jobdemandRousan:'',
  jobdemandNumber:'',
  jobdemandState:'',
  deptId:'',
  jobdemandDate:'',
})
//选中元素事件,搜索
const JobMohu=()=>{
  axios.post("http://localhost:9884/jobdemand/selsectJobMoHu",souForm).then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
    d.brs=data.length
    for (let datum of res.data.data) {
      d.srs +=datum.jobdemandNumber;
    }
  })
  console.log(souForm)
}
//重置搜索
const chongzhi = () => {
      souForm.jobdemandName='',
      souForm.jobdemandState='',
      souForm.deptId='',
      getDate()
}
const form = reactive({
  jobdemandId:'',
  jobdemandName:'',
  jobdemandRousan:'',
  jobdemandNumber:'',
  jobdemandState:0,
  deptId:'',
  jobdemandDate:str,
})
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
  //记录表数据
  tableData2:[],
  brs:0,
  srs:0,
  formJobPost:false,
  formJobPost2:false,
  //下拉框部门数组
  typeDate:[],
  //下拉框岗位数据
  jobDate:[],
  //参考人数
  cNumber:0,
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
const getDate =()=>{
  axios.post("http://localhost:1688/jobdemand/selectJobdemand").then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
    d.brs=data.length
    for (let datum of res.data.data) {
      d.srs +=datum.jobdemandNumber;
    }
  })
}
//定义记录表数据
const jiluForm=reactive({
  jobdemandId:'',
  jobdemandState:'',
  jobdemandNstate:'',
  jobrecordingDate:str,
})
//修改状态方法
const updateSteta = (jobdemandState,jobdemandId) => {
  if (jobdemandState==0){
    axios.post("http://localhost:1688/jobdemand/updateJobState/"+1+"/"+jobdemandId)
    .then((res)=>{
      jiluForm.jobdemandId=jobdemandId
      jiluForm.jobdemandState=jobdemandState
      jiluForm.jobdemandNstate=1;
      axios.post("http://localhost:1688/jobrecordingsw/addJobreding",jiluForm)
          .then((res)=>{
          })
      getDate()
      ElMessage({
        message: '操作成功',
        type: 'success',
      })
    })
  }else if(jobdemandState==1){
    axios.post("http://localhost:1688/jobdemand/updateJobState/"+2+"/"+jobdemandId)
        .then((res)=>{
          jiluForm.jobdemandId=jobdemandId
          jiluForm.jobdemandState=jobdemandState
          jiluForm.jobdemandNstate=2;
          axios.post("http://localhost:1688/jobrecordingsw/addJobreding",jiluForm)
              .then((res)=>{
              })
          getDate()
          ElMessage({
            message: '操作成功',
            type: 'success',
          })
        })

  }else if (jobdemandState==2){
    axios.post("http://localhost:1688/jobdemand/updateJobState/"+1+"/"+jobdemandId)
        .then((res)=>{
          axios.post("http://localhost:1688/jobdemand/updateJobdemandDate/"+str2+"/"+jobdemandId)
              .then((res)=>{
                getDate()
              })
          jiluForm.jobdemandId=jobdemandId
          jiluForm.jobdemandState=jobdemandState
          jiluForm.jobdemandNstate=1;
          axios.post("http://localhost:1688/jobrecordingsw/addJobreding",jiluForm)
              .then((res)=>{
              })
          ElMessage({
            message: '操作成功',
            type: 'success',
          })
        })
  }
}
//新增岗位需求
//定义表单组件对象
const postForm = ref<FormInstance>();
//清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
      form.jobdemandId='',
      form.jobdemandName='',
      form.jobdemandRousan='',
      form.jobdemandNumber='',
      form.jobdemandState=0,
      form.deptId=[],
      form.jobdemandDate='',
          d.cNumber=0,
      d.formJobPost = false,
      d.jobDate=[]
}
//表单校验
const bookRule = reactive<FormRules>({
  jobdemandNumber:[
    {required:true,message:'请输入需求人数',trigger:['blur','change']},
  ],
  jobdemandName:[
    {required:true,message:'请输入岗位职称',trigger:['blur','change']},
  ],
  deptId:[
    {required:true,message:'请输入部门',trigger:['blur','change']},
  ],
  jobdemandRousan:[
    {required:true,message:'请输入岗位需求',trigger:['blur','change']},
  ],
  jobdemandDate:[
    {required:true,message:'请输入发布时间',trigger:['blur','change']},
  ]
})

//formEl代表当前表单组件对象
const onSubmit = async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//校验通过
      console.log(form)
      // axios.post("http://localhost:1688/jobdemand/selectJobmandAll/"+form.jobdemandName+"/"+form.deptId).then((res)=>{
       // if (res.data.data.length>0){
      //    console.log("已拥有该需求")
        // }else{
          axios.post("http://localhost:9884/jobdemand/addJobdemand",form)
              .then((res)=>{
                getDate()
                d.formJobPost = false;
              })
        // }
      // })
    } else {
      ElMessage.error('error submit!');
    }
  })
}
//查看详情
const dianjixq = (row) => {
  console.log(row)
  d.formJobPost2 = true;
  axios.post("http://localhost:1688/jobrecordingsw/selectJobreding/"+row.jobdemandId).then((res)=>{
    d.tableData2=res.data.data
    console.log(res.data.data)
  })
}
// //查询所有部门
// const Dept = () => {
//   axios.post("http://localhost:9884/depting/selectDept").then((res)=>{
//       d.typeDate=res.data.data
//       console.log(res.data.data)
//     })
// }
//查询所有部门
const Dept22 = () => {
  axios.get("http://localhost:9883/department_con/alldepartments").then((res)=>{
    d.typeDate=res.data.data
    console.log(res.data.data)
  })
}
//选中部门查询子级岗位
const huoquJb = (deptId) => {
      form.jobdemandName='',
       // console.log(deptId)
      axios.post("http://localhost:1688/jobre/selectDept/"+deptId).then((res)=>{
        d.jobDate=res.data.data
       // console.log(res.data.data)
      })
}
//选中岗位查询需求参考人数 huoquNumber
const huoquNumber = (jobdemandName) => {
  //console.log(jobdemandName)
  axios.post("http://localhost:1688/jobre/selectJob/"+jobdemandName).then((res)=>{
    console.log(res.data.data)
    d.cNumber=res.data.data[0].jobrecordBnumber-res.data.data[0].jobrecordSnumber
  })
}
const {formJobPost,formJobPost2} = toRefs(d);
onBeforeMount(function () {
  getDate()
  // Dept()
  Dept22()
})
</script>

<style scoped>
.post{
  width: 100%;
  /*height: 649px;*/
}

.tbUpDiv{
  /*position: relative;*/
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tbImg{
  margin-left: 20px;

}
.tbUpButt{
}
.tbUpPost{
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.oneLine{
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
</style>